<template>
  <el-dialog
      :visible.sync="dialogVisible"
      width="700px"
      :before-close="closeDialog"
      append-to-body
      title="提交"
  >


    <el-form  :label-position="labelPosition"  label-width="100px" ref="form" :model="submitParam"  v-loading="loading">

      <el-form-item prop="nextNodes" label="后续任务">
        <el-select v-model="submitParam.nextNodeIds" @change="nextNodeSelect" :disabled="!selectFlag"  :multiple="!selectMoreFlag" placeholder="请选择" style="width: 400px">
          <el-option
              v-for="item in nextNodes"
              :key="item.nodeId"
              :label="item.nodeName"
              :value="item.nodeId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-for="item in submitParam.nextNodes"  :label="item.nodeName" >
        <el-select v-model="item.approveUserAccounts" multiple placeholder="请选择审批人"  @change="approveUserSelect(item)" style="width: 400px" :disabled="!item.approveSelectFlag">
          <el-option
              v-for="item in item.allApproveUsers"
              :key="item.account"
              :label="item.username"
              :value="item.account">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="icon" label="意见">
        <el-input size= "small" type="textarea"  placeholder="请输入意见" rows="6"  v-model="submitParam.suggest" style="width: 400px"></el-input>
      </el-form-item>

    </el-form>
    <div class="btn-group">
      <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
      <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {submit,nextTask} from '@/api/workflowInstance'
export default {
  components: {},
  data() {
    return {
      labelPosition: 'left',
      dialogVisible: false,
      loading: false,
      workflowDetail:{},
      formData:{},
      nextNodes:[],
      selectFlag:false,
      selectMoreFlag:false,
      submitParam:this.defaultSubmitParam(),
      nextTaskParam:this.defaultTaskParam()
    }
  },
  created() {
  },
  methods: {
    defaultTaskParam(){
      return {
        processId:"",
        processInstanceId:"",
        taskId:"",
        account:"",
        formData:{}
      }
    },
    defaultSubmitParam(){
      return {
        processId:"",
        processInstanceId:"",
        taskId:"",
        account:"",
        pathNodeId:[],
        suggest:"",
        formData:{},
        nextNodes:[],
        nextNodeIds:[],
      }
    },
    nextNodeSelect(node){
      let nodeIds = this.submitParam.nextNodeIds;
      let nodes = [];
      this.nextNodes.forEach(next=>{
        if(nodeIds.indexOf(next.nodeId) !== -1){
          nodes.push(next);
        }
      })
      this.submitParam.nextNodes = nodes;
      this.submitParam.pathNodeId = node.pathNodeId;
    },
    approveUserSelect(node){
      let userIds = node.approveUserAccounts;
      let users = [];
      node.allApproveUsers.forEach(user=>{
        if(userIds.indexOf(user.account) !== -1){
          users.push(user);
        }
      })
      node.approveUsers = users;
    },
    async submit(){
      if(this.submitParam.nextNodes == null || this.submitParam.nextNodes.length === 0){
        this.$message.warning("请选择下一步任务");
        return;
      }
      let existNullApproveUser = false;
      this.submitParam.nextNodes.forEach(node=>{
        if((node.approveUsers == null || node.approveUsers.length === 0) && node.nodeType !== 'end'){
          this.$message.warning("请选择下一步任务处理人");
          existNullApproveUser = true;
        }
      })
      if(existNullApproveUser){
        return;
      }
      if(this.submitParam.suggest == null || this.submitParam.suggest === ""){
        this.$message.warning("请填写意见");
        return;
      }
      this.loading = true;
      this.submitParam.processInstanceId = this.workflowDetail.processInstanceId;
      this.submitParam.processId =  this.workflowDetail.details.processId;
      this.submitParam.taskId = this.workflowDetail.details.taskId;
      this.submitParam.formData = this.formData;
      let ret = await submit(this.submitParam);
      if(ret.code === '200'){
        this.$message.success("提交成功");
        this.loading = false;
        location.reload();
      }
      this.loading = false;
    },
    async getNextTask(){
      this.nextTaskParam.processId = this.workflowDetail.details.processId;
      this.nextTaskParam.processInstanceId = this.workflowDetail.details.processInstanceId;
      this.nextTaskParam.taskId = this.workflowDetail.details.taskId;
      this.nextTaskParam.formData = this.formData;
      let ret = await nextTask(this.nextTaskParam);
      this.nextNodes = ret.data.nextNodes;
      this.selectFlag = ret.data.selectFlag;
      this.selectMoreFlag = ret.data.selectMoreFlag;
      if(this.selectFlag === false){
        this.submitParam.nextNodes = this.nextNodes;
        this.submitParam.nextNodeIds = this.nextNodes.map(next=>{
          return next.nodeId
        })
      }
      this.$nextTick(()=>{
        this.nextNodes.forEach(next=>{
          next.allApproveUsers = next.approveUsers;
          let userIds = [];
          next.allApproveUsers.forEach(user=>{
            userIds.push(user.account);
          })
          next.approveUserAccounts = userIds;
          if(next.approveSelectFlag === true){
            next.approveUsers = [];
            next.approveUserAccounts = [];
          }
          this.loading = false;
        })
      })

    },
    showDialog(row,formData) {
      this.submitParam = this.defaultSubmitParam();
      this.nextTaskParam = this.defaultTaskParam();
      this.loading = true;
      this.workflowDetail = row;
      this.formData = formData;
      this.getNextTask();
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      this.loading = false
      this.submitParam = this.defaultSubmitParam();
      this.nextTaskParam = this.defaultTaskParam();
    },
  },

}
</script>


<style src="../../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>
.search-item {
  float: left;
  margin: 0 20px 20px 0;

  span {
    color: #606266;
    font-size: 14px;
    margin-right: 0px;
  }
}
.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}


.workProcessClass {
  height: 500px;
  overflow: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: white;
}
</style>
